<!DOCTYPE html>
<html lang="zh_CN">
<head>
  <meta charset="UTF-8">
  <title><%= htmlWebpackPlugin.options.title %></title>
  <meta name=Keywords content="<%= htmlWebpackPlugin.options.keywords %>">
  <meta name=Description content="<%= htmlWebpackPlugin.options.description %>">
  <link rel="shortcut icon" href="//www.artup.com/img/logoMin.ico" type="images/x-icon" />
</head>
<body style="opacity:0;">
<div id="app">
  <unify-header></unify-header>
  <suspension class="suspend" ref="suspend" :show-height="showSuspensionHeight" @mouseleave="suspendPackUp">
    <div class="container">
      <div class="upper">
        <div class="wrapper">
          <label class="suspend-label">艺术台历</label>
          <label class="customization-item"
                 :class="{current:customizationItem==='color'}"
                 @mouseover="suspendPullDown('color')"
                 @click="suspendPullDown('color')">颜色：{{!frameShowBool?nowColor.name:'未选择'}}</label>
          <label
            class="customization-item"
            :class="{current:customizationItem==='size'}"
            @mouseover="suspendPullDown('size')"
            @click="suspendPullDown('size')">尺寸：{{!frameShowBool?nowSize.name:'未选择'}}</label>
          <button class="customization-btn" @click="startCustom">开始定制</button>
        </div>
      </div>
      <div class="under">
        <div class="wrapper" style="padding-left:338px;">
          <div class="suspend-color-item"
               v-show="customizationItem==='color'"
               v-for="(item,index) in frameColor"
               :class="['background-'+item.code,{active:!frameShowBool&&item.code===nowColor.code}]"
               @click="updateColorFn(index)&&suspendPackUp()">
            <label>{{item.name}}</label>
          </div>
          <div class="suspend-size-item"
               v-show="customizationItem==='size'"
               v-for="(item,index) in frameSize"
               :class="['background-'+nowColor.code,{active:!frameShowBool&&nowSize.code===item.code}]"
               @click="updateSizeFn(index)&&suspendPackUp()">{{item.name}}
          </div>
        </div>
      </div>
    </div>
  </suspension>
  <div class='HedBox'>
    <div class="container">
      <div class="bothSides">
        <div class="imgBoxList" v-show="!frameShowBool">
          <!--<div id="picContainer"-->
               <!--class="picContainer picContainerOne"-->
               <!--:style="{backgroundImage:'url('+picturePrefix+previewImageUrl+')'}">-->
          <!--</div>-->
          <img id="picContainer" style="margin: auto auto;max-height: 100%;max-height: 100%;left: 0;top: 0;right: 0;bottom: 0;"
               class="picContainer picContainerOne"  :src="picturePrefix+previewImageUrl" alt="">
          <div class="boxA">
            <span class="sizeFrame"></span>
          </div>
          <div class="boxB">
            <span class="sizeFrame"></span>
          </div>
        </div>
        <div class="imgBoxList" v-show="frameShowBool">
          <div class="picContainerTwo picContainer " style="background-image: url(http://image2.artup.com/static/pc/tl/tl_icon13.png); width: 100% !important; height: 100% !important;
    background-size: auto 90% !important;
    left: 30px !important;
    top: 125px !important"></div>
        </div>
        <div class="typeBox">
          <div class="pageTitle">
            <h2 class="pageTitleTop">艺术台历</h2>
            <p class="pageTitleMid">13张专属照片，定制365天的时光陪伴 <br/>用艺术装饰你的生活，打造你的桌面展览</p>
          </div>
          <div class="btnChoose">颜色</div>
          <div class="frameBox">
            <div class="picAndText" v-for="(item,index) in frameColor" :key="index">
              <div class="box-angle"
                   :class="{active:!frameShowBool&&nowColor.code===item.code}"
                   @click="updateColorFn(index)"
                   :style="{'background':item.attr}"></div>
              <div class="k1_Foot1frame_click k1_pre_frame">{{item.name}}</div>
            </div>
          </div>
          <div class="btnChoose size">尺寸</div>
          <div class="sizeBox">
            <div @click='updateSizeFn(index)'
                 v-for='(item,index) in frameSize'
                 class="k1_Foot1size_click"
                 :class="{active:!frameShowBool&&nowSize.code===item.code}"
                 :key="index">{{item.code}}mm
            </div>
          </div>
          <div class="rightBottom">
            <div class="showPrice">
              <span class="price_show">{{price}} RMB</span><span class="skuCode" style="display: none"></span>
            </div>
            <div @click="startCustom" class="startBook">开始定制</div>
          </div>
        </div>

      </div>
    </div>
  </div>
  <div class="page pageTwo" ref="showSuspensionFlag">
    <div class="pageContent pageContentTwo">
      <p class="tittles">NEW YEARS</p>
      <p class="contents">365天的光影记忆 为你独家定制</p>
      <img src="http://image2.artup.com/static/pc/tl/tl-page1.png" alt="">
    </div>
  </div>
  <div class="page pageThree">
    <div class="pageContent pageContentThree">
      <p class="tittles">RECORD</p>
      <p class="contents">分享你的时间 记录你的角度</p>
    </div>
  </div>
  <div class="page pageFour">
    <div class="pageContent pageContentFour">
      <div class="cont_lf">
        <p class="tittles">EXHIBITION</p>
        <p class="contents">展现你的个性 装点你的生活</p>
      </div>

      <img src="http://image2.artup.com/static/pc/tl/tl-page3.png" alt="">
    </div>
  </div>
  <div class="page pageFive">
    <div class="pageContent pageContentFive">
      <p class="tittles">QUALITY</p>
      <p class="contents">艺术微喷级输出 搭配高品质艺术纸 </p>
      <p class="spans">白色 咖啡色两种底托可选 横版 竖版两种规格 随心装饰家居及</p>
      <p class="spans">办公室桌面空间</p>
      <div class="desk-calendar"></div>
    </div>
  </div>
  <unify-footer></unify-footer>
</div>
</body>
</html>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-113376322-1"></script>
<script>
  window.dataLayer = window.dataLayer || []
  function gtag() {
    dataLayer.push(arguments)
  }
  gtag('js', new Date())

  gtag('config', 'UA-113376322-1')
</script>
